<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>

  <script>
		window.onload=function(){
			let cans=document.getElementById('cans');

			let cs=cans.getContext('2d');
			let rx=-100,ry=-100,rrx=200,rry=200;

			function todeg(n){
				return n*Math.PI/180;
			}
			function toang(n){
				return n/180/Math.PI;
			}

			
			let  dd=0;
			let ff=setInterval(function(){
				cs.clearRect(0,0,cans.width,cans.height)
				cs.save();
				cs.translate(200,200);//先移动在旋转；+
				//顺序是倒着执行的，canvas原点不能改变
				

				cs.rotate(todeg(dd)) //canvas的旋转是叠加的

				cs.strokeRect(rx,ry,rrx,rry);
				cs.restore()
				dd++;
				if(dd==10000){
					clearInterval(ff)
				}
			},6)
		}
			
  </script>
</body>
</html>
